import React from "react";
import "../../../../static/css/mobile/newslist.less";
import Tloader from 'react-touch-loader';
import {Icon } from "antd";

export default class NewsModal extends React.Component{
	
	constructor(){
		super();
		this.state = {
			newsList : [],
			initializing:1,
			hasMore:0,
			count:10
		}
	}

	componentDidMount(){
		this.http();
		// 当滑动到底部的时候，需要做一个延时加载等待
		setTimeout(() => {
			this.setState({
				initializing:2,
				hasMore:1
			})
		},2e3)
	}

	http(){
		var result = fetch(this.props.url+this.state.count,{
			method:"get"
		})
		.then(res => {
			return res.json();
		})
		.then(json => {
			this.setState({
				newsList:json
			})
		})
	}

	handlerLoadMore(resove){
		setTimeout(() => {
			// 获取上一次的count
			var count = this.state.count;
			this.setState({
				count:count+10,
				hasMore:count > 0 && count < 30
			})
			this.http();
			resove();
		},2e3)
	}

	render(){

		var { newsList,initializing,hasMore }  = this.state;
		return(

			<div className="newslist">
				<Tloader 
					initializing={initializing}
					hasMore={hasMore}
					onLoadMore={this.handlerLoadMore.bind(this)}>
					<ul>
						{
							newsList.map((item,index) =>{
								return (
									<li key={index}>
										<a href={item.url}>
											<img src={item.thumbnail_pic_s} alt=""/>
											<p>{item.title}</p>
											<p className="pText"><span>{item.date}</span><Icon type="folder-open" />&nbsp;&nbsp;66万</p>
										</a>
									</li>
								)
							})
						}
					</ul>
					
				</Tloader>
			</div>
		)
	}
}